import React, { Component } from 'react'
import Hrader from '../../../../components/head/hrader'
import './mySetson.less'
import axios from 'axios'
import cookies from 'js-cookie'
import Alert from '../../../../components/alert/alert'
class MySite extends Component {
    constructor() {
        super()
        this.state = {
            headtitle: { title: '我的地址', path: '/mySet' },
            mySitedata: [],//我的地址数据
            Sitedata: '',//重新输入的地址
            alertFlag: false,//弹层状态
            alerttitle: '确认删除本条地址',//弹层提示
            site_id: '',
        }
    }
    render() {
        let { mySitedata } = this.state
        console.log(mySitedata);
        return (
            <div className="mySite_box">
                <div className="mySite_header">
                    <Hrader title={this.state.headtitle} />
                </div>
                <div className="mySite_body">
                    {mySitedata.map((item, index) => {
                        return <div className="mySite_content" key={item.site_id}>
                            <div className="mySite_top">
                                <div className="mySite_img">
                                    {item.user_name}
                                </div>
                                <div className="mySite_title">
                                    <div className="mySite_message">{item.user_name}<span>{item.user_phone}</span></div>
                                    <div className="mySite_messageSite">
                                        <div>{item.status === '1' ? <span>默认</span> : null}
                                            {item.flag ? `${item.site_site}` : <><label htmlFor="mySite_intext"><b>*重新输入地址</b></label>
                                                <p> <input type="text" className="mySite_intext" placeholder={`${item.site_site}`} id="mySite_intext" onChange={(e) => {
                                                    this.setSitedata(e.target.value)
                                                }} /></p>
                                            </>}
                                        </div>
                                    </div>
                                </div>
                                <div className="mySite_icon">
                                    {item.flag ? <i className="iconfont icon-bi" onClick={() => { this.chalk(item) }}></i> :
                                        <div className="mySite_messagesub" onClick={() => { this.chalk(item.site_id, true) }}>保存</div>}
                                </div>
                            </div>
                            <div className="mySite_bottom">
                                <div><input type="radio" className="radio" name="radio" id={item.site_id} checked={item.status === '1' ? true : false} onChange={(e) => { this.status(e.target.checked, item) }} />
                                    <label htmlFor={item.site_id}>默认地址</label></div>
                                <div onClick={() => { this.del(item.site_id) }}>删除</div>
                            </div>
                        </div>
                    })}
                </div>
                <div className="mySite_addSite">
                    <button onClick={() => { this.add() }} className="mySite_addSiteBtn">+ 添加收货地址</button>
                </div>
                {this.state.alertFlag ? <div className="my_alert">
                    <Alert title={this.state.alerttitle} alertX={this.alertX} alertSub={this.alertSub}></Alert>
                </div> : null}
            </div>
        )
    }
    //关闭弹层 
    alertX = () => {
        this.setState({ alertFlag: false })
    }
    //弹层确认
    alertSub = () => {
        console.log('确认');
        if (this.state.site_id) {
            axios({
                method: 'post',
                url: '/api/front_end/delSite',
                data: {
                    site_id: this.state.site_id//    地址id
                }
            }).then(res => {
                console.log(res.data);
                if (res.data.code === '01') {
                    this.getData()
                }
            })
        }
        this.setState({ alertFlag: false })
    }
    // 跳转
    add = () => {
        console.log(this.props.history.push({
            pathname: '/home2',
            state: 'mySite'
        }));
    }
    componentDidMount() {
        this.getData()
        // console.log(this.props);
    }
    // 调取地址
    getData = () => {
        axios({
            method: 'post',
            url: '/api/front_end/getSite',
            data: {
                user_id: cookies.get('user_id')
            }
        }).then(res => {
            console.log(res.data);
            if (res.data.code === '01') {
                let { data } = res.data
                data.forEach(item => {
                    item.flag = true
                });
                this.setState({ mySitedata: data })
            }
        })
    }
    //修改地址
    chalk = (data) => {
        this.props.history.push({
            pathname: '/mySetSite',
            state: data
        })
    }
    // chalk = (site_id, flag) => {
        // this.props.history.push('/mySetSite')

        // let { mySitedata, chalk } = this.state
        // mySitedata.forEach((item, index) => {
        //     if (item.site_id === site_id) {
        //         if (item.flag) {
        //             item.flag = false
        //         } else {
        //             item.flag = true
        //         }
        //     }
        // })
        // // this.setState({ chalk: 1 })
        // this.setState({ mySitedata })
        // // 调用修改地址接口
        // if (flag) {
        //     if (this.state.Sitedata) {
        //         axios({
        //             method: 'post',
        //             url: '/api/front_end/changeSite',
        //             data: {
        //                 site: this.state.Sitedata,
        //                 site_id//    地址id
        //             }
        //         }).then(res => {
        //             console.log(res.data);
        //             if (res.data.code === '01') {
        //                 this.getData()
        //             }
        //         })
        //     } else {
        //         this.setState({ alerttitle: '请填写新地址', alertFlag: true, site_id: '' })
        //     }
        // }
    // }
    // 修改默认状态
    status = (type, data) => {
        console.log(data);
        axios({
            method: 'post',
            url: '/api/front_end/setSite',
            data: {
                user_id: data.site_userId,
                site_id: data.site_id,//    地址id
            }
        }).then(res => {
            console.log(res.data);
            if (res.data.code === '01') {
                this.getData()
            }
        })
    }
    // 输入地址
    setSitedata = (value) => {
        this.setState({ Sitedata: value })
    }
    // 删除接口
    del = (site_id) => {
        this.setState({ alertFlag: true, site_id, alerttitle: '确认删除本条地址' })
    }
}
export default MySite